<template>
	<view class="">
		<view class="container" v-if="!successful">
			<view class="title">申请加入区域代理</view>
			<view class="card">
				<view class="row">
					<image src="/static/images/aa_01.png" mode=""></image>
					<input type="text" placeholder="输入姓名" v-model="name" />
				</view>
				<view class="row">
					<image src="/static/images/aa_02.png" mode=""></image>
					<input type="number" placeholder="输入手机号码" maxlength="11" v-model="tel" />
					
				</view>
				<view class="row">
					<image src="/static/images/aa_03.png" mode=""></image>
					<input type="number" placeholder="输入验证码" v-model="vercode" />
					<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''" @click="code">
						{{ text }}
					</button>
				</view>
				<view class="row">
					<image src="/static/images/aa_04.png" mode=""></image>
					<view class="address">
						<picker 
							mode="multiSelector" 
							@change="bindRegionChange" 
							@columnchange="bindMultiPickerColumnChange" 
							:value="valueRegion"
							:range="multiArray">
							<view class='acea-row'>
								<view class="picker">城市区域</view>
								<!-- <view class='iconfont icon-dizhi font-color'></view> -->
								<text>{{region[0]}}{{region[1]}}{{region[2]}}</text>
							</view>
						</picker>
					</view>
					<!-- <input type="text" placeholder="城市区域" v-model="city" /> -->
					
				</view>
				<view class="agree">
					<checkbox-group class="checkgroup" @change='isAgree=!isAgree'>
						<checkbox :checked="isAgree ? true : false" color="#1ABB1D" />
						<text>已阅读并同意</text>
						<text @click="showProtocol = true">《入驻协议》</text>
					</checkbox-group>
				</view>
				<view class="btn" @click="submitForm">立即提交申请</view>
			</view>
			<view class="settlementAgreement" v-if="showProtocol">
				<view class="setAgCount">
					<i class="icon iconfont icon-cha" @click="showProtocol = false"></i>
					<div class="title">区域代理入驻协议</div>
					<view class="content">
						<jyf-parser :html="protocol" ref="article" :tag-style="tagStyle"></jyf-parser>
						<!-- <view v-html="protocol"></view> -->
					</view>
				</view>
			</view>
		</view>
		
		<view class="settledSuccessMain" v-else>
			<view class="settledSuccessful">
				<img class="image" src="/static/images/settledSuccessful.svg" alt="">
				<view class="title">恭喜，您的资料提交成功！</view>
				<view class="info">预计15个工作日内审核完毕，平台客服会及时与您联系！</view>
				<view class="goHome" hover-class="none" @click="goHome">
					返回首页
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getconfig,
	} from '@/api/public.js';
	import {
		getCity,
		getCaptcha,
	} from '@/api/api.js';
	import {
		registerVerify,
		applyAgency
	} from "@/api/user";
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import parser from "@/components/jyf-parser/jyf-parser";
	export default {
		mixins: [sendVerifyCode],
		components: {
			"jyf-parser": parser,
		},
		data() {
			return {
				name: '',
				tel: '',
				vercode: '',
				city: '',
				disabled: false,
				keyCode: '',
				type: "login",
				text: '获取验证码',
				isAgree: false,
				valueRegion: [0, 0, 0],
				multiArray: [],
				region: ['内蒙古', '呼和浩特市', ''],
				district: [],
				multiIndex: [0, 0, 0],
				successful: false,
				showProtocol: false,
				protocol: '',
				tagStyle: {
					img: 'width:100%;display:block;'
				},
			};
		},
		onLoad() {
			this.getCityList();
		},
		onReady() {
			uni.$on('update',(data)=>{
				this.protocol = data.sys_intention_agent_agree
			})
		},
		onShow() {
			this.getConfig()
		},
		methods: {
			getConfig() {
				let self = this
				// 获取配置
				getconfig().then(res => {
					this.protocol = res.data.sys_intention_agent_agree
				}).catch(err => {})
			},
			// 获取验证码
			async code() {
				let that = this;
				if (!that.tel) return that.$util.Tips({
					title: '请输入手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.tel)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				console.log(that.tel)
				await registerVerify({
						phone: that.tel,
						type: 'intention',
						key: that.keyCode,
						code: that.vercode
					})
					.then(res => {
						that.$util.Tips({
							title: res.message
						});
						that.sendCode();
					})
					.catch(res => {
						that.$util.Tips({
							title: res
						});
					});
			},
			// 地址数据
			getCityList: function() {
				let that = this;
				getCity().then(res => {
					this.district = res.data
					that.initialize();
				})
			},
			initialize: function() {
				let that = this,
					province = [],
					city = [],
					area = [];
				if (that.district.length) {
					let cityChildren = that.district[0].children || [];
					let areaChildren = cityChildren.length ? (cityChildren[0].children || []) : [];
					that.district.forEach(function(item) {
						province.push(item.name);
					});
					cityChildren.forEach(function(item) {
						city.push(item.name);
					});
					areaChildren.forEach(function(item) {
						area.push(item.name);
					});
					this.multiArray = [province, city, area]
				}
			},
			bindRegionChange: function(e) {
				let multiIndex = this.multiIndex,
					province = this.district[multiIndex[0]] || {
						children: []
					},
					city = province.children[multiIndex[1]] || {
						city_id: 0
					},
					multiArray = this.multiArray,
					value = e.detail.value;
			
				this.region = [multiArray[0][value[0]], multiArray[1][value[1]], multiArray[2][value[2]]]
				this.$set(this.region,0,multiArray[0][value[0]]);
				this.$set(this.region,1,multiArray[1][value[1]]);
				this.$set(this.region,2,multiArray[2][value[2]]);
				this.cityId = city.city_id
				this.valueRegion = [0, 0, 0]
				this.initialize();
			},
			bindMultiPickerColumnChange: function(e) {
				let that = this,
					column = e.detail.column,
					value = e.detail.value,
					currentCity = this.district[value] || {
						children: []
					},
					multiArray = that.multiArray,
					multiIndex = that.multiIndex;
				multiIndex[column] = value;
				switch (column) {
					case 0:
						let areaList = currentCity.children[0] || {
							children: []
						};
						multiArray[1] = currentCity.children.map((item) => {
							return item.name;
						});
						multiArray[2] = areaList.children.map((item) => {
							return item.name;
						});
						break;
					case 1:
						let cityList = that.district[multiIndex[0]].children[multiIndex[1]].children || [];
						multiArray[2] = cityList.map((item) => {
							return item.name;
						});
						break;
					case 2:
			
						break;
				}
				// #ifdef MP
				this.$set(this.multiArray, 0, multiArray[0]);
				this.$set(this.multiArray, 1, multiArray[1]);
				this.$set(this.multiArray, 2, multiArray[2]);
				// #endif
				// #ifdef H5
				this.multiArray = multiArray;
				// #endif
				this.multiIndex = multiIndex
				// this.setData({ multiArray: multiArray, multiIndex: multiIndex});
			},
			// 首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			// 提交申请
			submitForm() {
				if(!this.name) return this.$util.Tips({
					title: '请输入姓名'
				});
				if(!this.tel) return this.$util.Tips({
					title: '请输入手机号码'
				});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(this.tel)) return this.$util.Tips({
					title: '请输入正确的手机号码'
				});
				if(!this.vercode) return this.$util.Tips({
					title: '请输入验证码'
				});
				if(!this.isAgree) return this.$util.Tips({
					title: '请勾选入驻协议'
				});
				applyAgency({
					name: this.name,
					province: this.region[0],
					address: this.region[1],
					city: this.region[2],
					phone: this.tel,
					code: this.vercode
				}).then(res => {
					if(res.status == 200) {
						this.successful = true
					}
					// this.$util.Tips({
					// 	title: res.message
					// });
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
				})
				
			}
		}
	}
</script>

<style lang="scss">
page {
	height: 100vh;
	background-image: linear-gradient(to bottom left, #ef0a6a, #b6359c);
}
.container {
	width: 100%;
	padding: 40rpx;
	.title {
		color: #fff;
		font-size: 40rpx;
		font-weight: 700;
		text-align: center;
	}
	.card {
		width: 100%;
		height: 800rpx;
		background-color: #fff;
		margin-top: 40rpx;
		border-radius: 20rpx;
		box-shadow: 0 0 20rpx 10rpx #b6359c;
		padding: 30rpx 40rpx;
		.row {
			display: flex;
			align-items: center;
			width: 100%;
			height: 100rpx;
			border-bottom: 1rpx solid #cccbca;
			image {
				width: 50rpx;
				height: 50rpx;
			}
			input, .address {
				flex: 1;
				display: block;
				padding-left: 30rpx;
				font-size: 32rpx;
			}
			.address {
				color: #666;
				.acea-row {
					display: flex;
					justify-content: space-between;
				}
			}
			.code {
				padding: 10rpx 20rpx;
				border: 1px solid #ff4977;
				border-radius: 60rpx;
				font-size: 30rpx;
				color: #ff4977;
			}
			text{
				font-size: 30rpx;
			}
		}
		.agree {
			margin-top: 130rpx;
			.checkgroup {
				display: flex;
				align-items: center;
				justify-content: center;
			}
			/deep/ .uni-checkbox-input {
				border-radius: 8rpx;
			}
			checkbox .wx-checkbox-input {
				border-radius: 8rpx;
			}
		}
		.btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			height: 90rpx;
			background-image: linear-gradient(45deg, #b6359c, #ef0a6a);
			color: #fff;
			font-size: 32rpx;
			border-radius: 45rpx;
			margin-top: 30rpx;
		}
	}
	
}
	.settlementAgreement {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .5);
		z-index: 10;
	}
	.settlementAgreement .setAgCount {
		background: #fff;
		width: 656rpx;
		height: 458px;
		position: absolute;
		top: 50%;
		left: 50%;
		border-radius: 12rpx;
		-webkit-border-radius: 12rpx;
		padding: 52rpx;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		overflow: hidden;
		.content {
			height: 900rpx;
			overflow-y: scroll;

			/deep/ p {
				font-size: 13px;
				line-height: 22px;
			}

			/deep/ img {
				max-width: 100%;
			}
		}
	}
	.settlementAgreement .setAgCount .icon {
		font-size: 42rpx;
		color: #b4b1b4;
		position: absolute;
		top: 15rpx;
		right: 15rpx;

	}
	.settlementAgreement .setAgCount .title {
		color: #333;
		font-size: 32rpx;
		text-align: center;
		font-weight: bold;
	}
	.settlementAgreement .setAgCount .content {
		margin-top: 32rpx;
		color: #333;
		font-size: 26rpx;
		line-height: 22px;
		text-align: justify;
		text-justify: distribute-all-lines;
		height: 756rpx;
		overflow-y: scroll;
	}
	.settledSuccessMain {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #fff;
	}
	.settledSuccessful {
		flex: 1;
		width: 100%;
		padding: 0 56px;
		height: auto;
		background: #fff;
		text-align: center;
	}
	.settledSuccessful .image {
		width: 189px;
		height: 157px;
		margin-top: 66px;
	}
	.settledSuccessful .title {
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		margin-top: 35px;
	}
	.settledSuccessful .info {
		color: #A0A0A0;
		font-size: 13px;
		margin-top: 12px;
	}
	.settledSuccessful .goHome {
		margin: 60px auto 0;
		line-height: 43px;
		color: #282828;
		font-size: 15px;
		border: 1px solid #B4B4B4;
		border-radius: 60px;
	}
</style>
